<template>
  <div id="main" class="animate__animated animate__fadeInLeft">
    <div id="search">
      <search-main></search-main>
    </div>
    <div id="main-introduction" class="animate__animated animate__fadeInLeft">
      <MainBox title="Attractions" destination="attractions">
        <AttractionsMain></AttractionsMain>
      </MainBox>
      <MainBox class="box" title="Recommend" destination="main">
        <Recommend></Recommend>
      </MainBox>
      <MainBox title="Diary" destination="forum">
          <diary-main></diary-main>
      </MainBox>
      <MainBox title="Map" class="map-show" destination="map">
        <!-- <map-main></map-main> -->
      </MainBox>
    </div>
  </div>
</template>

<script setup lang="ts">
import MainBox from '@/composables/MainBox.vue'
import Recommend from '@/components/main/RecommendMain.vue'
import AttractionsMain from '@/components/main/AttractionsMain.vue'
import DiaryMain from '@/components/main/DiaryMain.vue'
import SearchMain from '@/components/main/SearchMain.vue'
</script>

<style>
#main {
  width: 100%;
}

#search {
  width: 100%;
}

#main-introduction {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
  width: 85%;
}

.box {
  width: 100%;
  margin: 0 auto;
}
</style>
